<template>
  <div>
    <p style="font-size: 18px;">{{time}}</p>
    <el-progress v-if="nowType == '任务进行中'" type="circle" :percentage="nowBFB" ></el-progress>
    <el-progress v-else-if="nowType == '任务已超时'" type="circle" :percentage="nowBFB" status="warning"></el-progress>
    <el-progress v-else-if="nowType == '任务已提交'" type="circle" :percentage="nowBFB" status="success"></el-progress>
  </div>
</template>
<script>
export default{
  data () {
    return {
      time : '',
      flag : false,
      nowType : '', // 当前状态
      nowBFB : null // 当前的百分比
    }
  },
  mounted () {
    let time = setInterval(() => {
      if (this.flag == true) {
        clearInterval(time);
      }
      this.timeDown();
    }, 500);
  },
  props : {
    startTime : {
      type: String
    },
    endTime : {
      type: String
    },
    outTime : {
      type: String
    },
  },
  methods : {
    timeDown () {
      /***
       * 存在3种状态
       * 1、任务未开始：当前时间小于开始时间，显示任务未开始并给出任务距离开始时间的倒计时
       * 2、任务进行中：当前时间在开始时间和结束时间之间，显示任务进行中并给出距离结束时间的倒计时
       * 3、任务超时中：当前时间大于任务结束时间，显示任务超时并给出超时时间
       * @type {Date}
       */
      const startTime = new Date(this.startTime); // 开始时间
      const endTime = new Date(this.endTime); // 结束时间
      const nowTime = new Date();
      // 时间计算对比
      let leftTime = parseInt((startTime.getTime() - nowTime.getTime()) / 1000); // 当前时间和开始时间
      let rightTime = parseInt((endTime.getTime() - nowTime.getTime()) / 1000); // 当前时间和结束时间
      let noRightTime = parseInt((nowTime.getTime() - endTime.getTime()) / 1000); // 结束时间和当前时间

      if(this.outTime == null || this.outTime == ''){
        // 状态判断
        if(nowTime.getTime() <= startTime.getTime()){
          this.time = '距离任务开始: ';
          let h = this.formate(parseInt(leftTime / (60 * 60) % 24));
          let m = this.formate(parseInt(leftTime / 60 % 60));
          let s = this.formate(parseInt(leftTime % 60));
          // this.time = this.time + `${d} 天 ${h} 小时 ${m} 分 ${s} 秒`;
          this.time = this.time + `${h} 小时 ${m} 分 ${s} 秒`;    // 需要修改时间样式的话 ，比如需要什么30分钟倒计时，就只保留分和秒
        }else if(nowTime.getTime() > endTime.getTime()){
          this.time = '任务已经超时: ';
          let h = this.formate(parseInt(noRightTime / (60 * 60) % 24));
          let m = this.formate(parseInt(noRightTime / 60 % 60));
          let s = this.formate(parseInt(noRightTime % 60));
          this.nowType = '任务已超时';
          this.nowBFB = parseInt(noRightTime*100/(24*60*60));
          this.time = this.time + `${h} 小时 ${m} 分 ${s} 秒`;    // 需要修改时间样式的话 ，比如需要什么30分钟倒计时，就只保留分和秒
        }else{
          this.time = '距离任务结束: ';
          let h = this.formate(parseInt(rightTime / (60 * 60) % 24));
          let m = this.formate(parseInt(rightTime / 60 % 60));
          let s = this.formate(parseInt(rightTime % 60));
          this.nowType = '任务进行中';
          this.nowBFB = parseInt(rightTime*100/(4*60*60));
          this.time = this.time + `${h} 小时 ${m} 分 ${s} 秒`;    // 需要修改时间样式的话 ，比如需要什么30分钟倒计时，就只保留分和秒
        }
      }else{
        const outTime = new Date(this.outTime); // 提交时间
        // 状态判断
        if(outTime.getTime() > endTime.getTime()){
          this.nowType = '任务已超时';
          this.time = '任务已经逾期';
          this.nowBFB = parseInt(noRightTime*100/(24*60*60));
        }else{
          this.nowType = '任务已提交';
          this.time = '任务已经提交';
          this.nowBFB = parseInt(rightTime*100/(4*60*60));
        }
      }
    },
    formate(time) {
      if (time >= 10) {
        return time;
      } else {
        return `0${time}`;
      }
    }
  }
}
</script>
<style scoped>
</style>
